<template>
  <!-- 推送记录 -->
  <div class="supplier table-flex-wrapper">
    <el-form ref="queryForm" :inline="true" @submit.native.prevent="handleQuery">
      <el-form-item>
        <el-date-picker v-model="dateRange" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryParams.userName" placeholder="模糊搜索推送人姓名" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" native-type="submit">搜索</el-button>
        <el-button size="small" @click="handleExport" type="primary" v-hasPermi="['slope:detail:export']">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table v-loading="loading" size="mini" :data="operationList">
      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="message" label="推送内容" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="slopeSubscribers" label="推送人数" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.slopeSubscribers.length}}
        </template>
      </el-table-column>
      <el-table-column prop="slopeSubscribers" label="具体推送人" width="160" align="center" :formatter="subscriberManDetail">
      </el-table-column>
      <el-table-column prop="sendTime" label="推送时间" min-width="160" align="center" :formatter="handleTimeFarmat"></el-table-column>
      <el-table-column prop="operation" label="操作" width="140" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" class="btn" @click="handleReview(scope.row)">查看</el-button>
          <el-button size="mini" class="btn white" type="primary" @click="deleteInfo(scope.row.subscribeDetailId)" v-hasPermi="['slope:detail:remove']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <Review ref="review" @refresh="getList"></Review>
  </div>
</template>

<script>
  import Review from "./review";
  import { listSubscribe, exportSubscribe, deleteSubscribe } from "@/api/page/alarm.js";
  export default {
    name: "supplier",
    components: {
      Review
    },
    data() {
      return {
        tableHeight: 400,
        // 角色表格数据
        operationList: [],
        // 遮罩层
        loading: true,
        dateRange: [],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined
        },
        pickerOptions: {
          shortcuts: [{
              text: "最近一天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        },
        // 导出加载框
        exportLoading: {
          lock: true,
          text: '正在导出文件，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /**
       * 删除推送记录信息
       * @param id 推送记录id
       */
      deleteInfo(id) {
        console.log(id);
        let self = this;
        self.$confirm( "确认要删除该条信息吗?", "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
          })
          .then(function() {
            deleteSubscribe(id).then(res=> {
              if(res.code==200){
                self.msgSuccess(res.msg);
              }else{
                self.msgError(res.msg);
              }
            });
          })
          .then(() => {
            self.getList();
          })
          .catch(function() {
            self.$message({
              type: 'info',
              message: '已取消删除'
            });
        });
      },
      /** 查询角色列表 */
      getList() {
        let self = this;
        self.loading = true;
        listSubscribe(this.addDateRange(this.queryParams, this.dateRange))
          .then(response => {
            var data = response.rows;
            self.total = response.total;
            self.operationList = data;
            self.loading = false;
          })
          .catch(err => {
            self.loading = false;
          });
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      subscriberManDetail(row) {
        var str = "  \n";
        for (var i = 0; i < row.slopeSubscribers.length; i++) {
          str += row.slopeSubscribers[i].subscribeNickName + " ";
        }
        return str;
      },

      /** 查看按钮操作 */
      handleReview(row) {
        this.$refs.review.handleClick({
          info: row,
          title: "推送详情"
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        let self = this;
        let loading = undefined;
        const queryParams = this.addDateRange(this.queryParams, this.dateRange);
        this.$confirm("是否确认导出所有数据?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(function() {
            loading = self.$loading(self.exportLoading);
            return exportSubscribe(queryParams);
          })
          .then(response => {
            this.download(response.msg);
            loading.close();
          })
          .catch(function() {
            if (loading != undefined) {
              loading.close();
            }
          });
      },

      //时间格式处理
      handleTimeFarmat(row) {
        var val = row.sendTime;
        return val.substring(0, 10) + " " + val.substring(11, 19);
      }
    }
  };
</script>
